<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<button class="button-balanced" id="save">save</button>
<button class="getCameraCoordinates" id="save1">获取视点</button>
<button class="registDeviceInfoCallback" id="save11">注册回调</button>
<br/>
<a href="" download="canvas_love.png" id="save_href">
    <img src="" id="save_img"/>
    <iframe
            name="hy_iframe"
            width="1200px"
            height="500px"
            src="./index.html"
    ></iframe>
</a>
<script src="./hyApi.js"></script>
<script>
  var c = document.getElementById('canvas')
  let a = 1
  let res
  let hyApi
  // const hyApi = new HyApi('hy_iframe', {})

  const te = function(b) {
    // console.log(a)
    // console.log(a * a)
    return `<div>
                <p>设备名称：防火门</p>
                <p>设备编号：SHAIFHDI2121SAS</p>
                <p>受损度：60%</p>
            </div>`
  }
  document.getElementsByClassName('button-balanced')[0].addEventListener('click', () => {
    // hyApi.start()
    hyApi.testFunc()
  })
  document.getElementsByClassName('getCameraCoordinates')[0].addEventListener('click', () => {
    // res = hyApi.getCameraCoordinates()
    hyApi.aa()
  })
  document.getElementsByClassName('registDeviceInfoCallback')[0].addEventListener('click', () => {
    hyApi.cc()
    // hyApi.registDeviceInfoCallback(te)
  })

  function testModal() {
    // console.log('testModal******', window)
    // console.log('testModal******', document.getElementsByTagName('iframe')[0].contentWindow === document.getElementsByName('hy_iframe')[0].contentWindow)
    // console.log('testModal**21****', document.getElementsByName('hy_iframe')[0].contentWindow)
    // console.log('testModal******', document.getElementsByTagName('iframe')[0].contentWindow.sunModal)
    let win = document.getElementsByTagName('iframe')[0].contentWindow
    // console.log(win, '======')
  }

  // testModal()

  function drawLove(canvas) {
    let ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.fillStyle = '#E992B9'
    ctx.moveTo(75, 40)
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25) //左半边
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5) //左上角
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120)//右半边
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5)//右上角
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25)//右下角
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40)//左下角
    ctx.fill() //填充路径区域，以实际绘制出桃心形状。
  }

  //画一个桃心
  drawLove(c)

  var butSave = document.getElementById('save')
  butSave.onclick = function() {
    var svaeHref = document.getElementById('save_href')
    /*
     * 传入对应想要保存的图片格式的mime类型
     * 常见：image/png，image/gif,image/jpg,image/jpeg
     */
    var img = document.getElementById('save_img')
    var tempSrc = canvas.toDataURL('image/png')
    svaeHref.href = ''
    img.src = tempSrc
  }
  window.onload = () => {
    // console.log('testModal******', window)
    // console.log('testModal******', document.getElementsByTagName('iframe')[0].contentWindow === document.getElementsByName('hy_iframe')[0].contentWindow)
    // console.log('testModal**21****', document.getElementsByName('hy_iframe')[0].contentWindow)
    // console.log('testModal******', document.getElementsByTagName('iframe')[0].contentWindow.sunModal)
    let win = document.getElementsByTagName('iframe')[0].contentWindow
    // console.log(win, '======')
    win.sunModal(te)
    // win.sunModal(() => te(5656))//传值
    hyApi = new HyApi('hy_iframe', {})
    console.log(hyApi, '************-')
  }

</script>
</body>
</html>
